<!DOCTYPE html>
<%@page import="mobi.weq.util.Util"%>
<%@page import="mobi.weq.model.User"%>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Find Route</title>
<jsp:include page="jsp/templates/header.jsp" />
<script type="text/javascript" src="js/lineCalculations.js"></script>
<script type="text/javascript" src="js/map.js"></script>

<style type="text/css">
html,body,#map-canvas {
	width: 100%;
	height: 100%;
	margin: 0px;
	padding: 0px
}

#pac-input {
	background-color: #fff;
	padding: 0 11px 0 13px;
	width: 400px;
	font-family: Roboto;
	font-size: 15px;
	font-weight: 300;
	text-overflow: ellipsis;
}

#pac-input:focus {
	border-color: #4d90fe;
	margin-left: -1px;
	padding-left: 14px; /* Regular padding-left + 1. */
	width: 401px;
}

.pac-container {
	font-family: Roboto;
	z-index: 9999;
}

#start-from {
	border-radius: 4px 4px 0 0;
	border-bottom: none;
}

#destination {
	border-radius: 0 0 4px 4px;
	border-top: 1px dashed silver;
}
.glyphicon.custom{
    width: 48px;
    height: 28px;
	background-position: center;
	background-repeat: no-repeat;
}
.glyphicon.custom.glyphicon-pollution {
	background-image: url("images/pollution.png")
}

.glyphicon.custom.glyphicon-directions {
	background-image: url("images/directions.png")
}

.glyphicon.custom.glyphicon-directions-pollution {
	background-image: url("images/directions-pollution.png")
}

</style>
</head>
<body>
	<%
		User user = Util.getUserFromSession(request, response);
		if (user != null) {
	%>
	<div class="btn-group hidden" id="menu-buttons" style="margin-bottom: 15px;">
		<a class="btn btn-default glyphicon glyphicon-home" href="home"></a>
		<a class="btn btn-default glyphicon glyphicon-map-marker" href="map"></a>
		<a class="btn btn-default glyphicon glyphicon glyphicon-stats" href="stats"></a>
		<a class="btn btn-default glyphicon glyphicon-comment" href="feedback"></a>
		<a class="btn btn-default glyphicon glyphicon-cog" href="settings"></a>
	</div>
	<div class="btn-group hidden" id="menu-buttons-map">
		<a class="btn btn-default glyphicon custom glyphicon-directions" id="find-route-button"></a>
		<a class="btn btn-default glyphicon custom glyphicon-pollution" id="show-pollution-button"></a>
		<a class="btn btn-default glyphicon custom glyphicon-directions-pollution" id="show-directions-pollution-button"></a>
		<a class="btn btn-default glyphicon glyphicon-list" id="show-directions-button"></a>
	</div>
	<div id="map-canvas"></div>
	<div class="modal fade bs-example-modal-sm" id="find-route-model" data-target="#find-route-button">
		<div class="modal-dialog modal-sm">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal">
						<span aria-hidden="true">&times;</span>
						<span class="sr-only">Close</span>
					</button>
					<h4 class="modal-title">Find Route</h4>
				</div>
				<div class="modal-body" id="find-route-body">
					<div style="width: 100%" class="input-group input-group-lg">

						<!-- <input type="text" class="form-control" id="start-from" value="Haymarket, Edinburgh, United Kingdom"
							placeholder="Starting from">
						<input type="text" class="form-control" id="destination" value="Edinburgh Castle, Edinburgh, United Kingdom"
							placeholder="Destination"> -->
						<input type="text" class="form-control" id="start-from"
							value="The University of Edinburgh, South Bridge, Edinburgh, United Kingdom" placeholder="Starting from">
						<input type="text" class="form-control" id="destination" value="Edinburgh Airport, Edinburgh, United Kingdom"
							placeholder="Destination">

					</div>
					<div class="form-group" style="margin-top: 20px;">
						<label for="travelMode">Travel Mode</label>
						<select name="travelMode" id="travel-mode" class="form-control">
							<option value="DRIVING">DRIVING</option>
							<option value="WALKING">WALKING</option>
							<option value="BICYCLING">BICYCLING</option>
						</select>
					</div>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
					<button type="button" class="btn btn-primary" id="find-route-ok" data-dismiss="modal">Find Route</button>
				</div>
			</div>
			<!-- /.modal-content -->
		</div>
	</div>
	<!-- /.modal-dialog -->
	<div class="modal fade bs-example-modal-sm" id="show-directions-model" data-target="#show-directions-button">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal">
						<span aria-hidden="true">&times;</span>
						<span class="sr-only">Close</span>
					</button>
					<h4 class="modal-title">Directions</h4>
				</div>
				<div class="modal-body" id="show-direction-body">
					<div id="total-distance"></div>
					<div id="directionsPanel"></div>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
				</div>
			</div>
			<!-- /.modal-content -->
		</div>
		<!-- /.modal-dialog -->

	</div>
	<!-- /.modal -->
	<%
		}
	%>
</body>
</html>